<template>
  <view class="recruit-section">
    <view class="recruit-section__title">{{ title }}</view>
    <view class="recruit-section__content">
      <text v-if="isPreLine" class="recruit-section__text">{{ content }}</text>
      <template v-else>{{ content }}</template>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  content: {
    type: String,
    default: ''
  },
  isPreLine: {
    type: Boolean,
    default: false
  }
});
</script>

<style lang="scss" scoped>
.recruit-section {
  background-color: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  
  &__title {
    font-size: 17px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    position: relative;
    padding-left: 14px;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 5px;
      height: 20px;
      background: linear-gradient(to bottom, #1890ff, #36a6ff);
      border-radius: 3px;
    }
  }
  
  &__content {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    padding: 0 4px;
  }
  
  &__text {
    white-space: pre-line;
  }
}
</style>
